<template>
  <div class="app-container">
    <el-card>
      <div class="header-tab">
        123123123
      </div>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
        <el-row type="flex">
          <el-col v-for="item in 10">
            <el-form-item prop="phoneNumber">
              <el-input v-model="queryParams.dictLabel" @keyup.enter.native="getList()"
                        placeholder="游戏名称:请输入游戏名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      
      <div class="table-btn">
        <div class="table-btn-item">
          <img src="../../assets/images/refresh.png" title="刷新"/>
        </div>
        <div class="table-btn-item" title="重置">
          <img src="../../assets/images/search.png"/>
        </div>
      </div>
    </el-card>
    
    <!--功能-->
    <div class="funcs">
      <div class="funcs-title">App升级配置</div>
      <div class="funcs-btns">
        <el-button type="primary" @click.native="handleAdd">新增</el-button>
      </div>
    </div>
    
    <div class="section">
      <el-table v-loading="tableLoading" :data="settingData" stripe>
        <el-table-column align="center" type="selection" width="70"/>
        <el-table-column label="更新内容" align="center" prop="dictLabel"/>
        <el-table-column label="更新地址" align="center" prop="dictLabel"/>
        <el-table-column label="更新标题" align="center" prop="dictLabel"/>
        <el-table-column label="版本号" align="center" prop="dictLabel"/>
        
        <el-table-column label="是否静默更新" align="center" prop="dictLabel" min-width="100">
          <template slot-scope="scope">
          
          </template>
        </el-table-column>
        <el-table-column label="是否强制更新" align="center" prop="dictLabel"  min-width="100"/>
        <el-table-column label="升级按钮文字" align="center" prop="dictLabel"  min-width="100"/>
        <el-table-column label="下载提示" align="center" prop="dictLabel"/>
        <el-table-column label="成功提示" align="center" prop="dictLabel"/>
        <el-table-column label="失败提示" align="center" prop="dictLabel"/>
        
        <el-table-column label="升级类型" align="center" prop="dictLabel"/>
        <el-table-column label="添加时间" align="center" prop="dictLabel"/>
        <el-table-column label="备注" align="center" prop="dictLabel"/>
        <el-table-column fixed="right" label="操作" align="center" width="200px">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleUpdate(scope.row)">
              <span style="color: rgba(83, 90, 244, 1);margin-right: 5px">编辑 </span>
            </el-button>
            <el-button size="mini" type="text" @click="handleDelete(scope.row)">
              <span style="color:#FF0000;margin-right: 5px">删除 </span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum" :total="total"
                  class="pagination" @pagination="getList('')"/>
    </div>
    
    <!--修改 添加-->
    <edit ref="editRef" :title="title"></edit>
  </div>
</template>

<script>
    import {addData, updateData, delData} from '@/api/system/dict/data'
    import edit from "./components/edit.vue";

    export default {
        components: {edit},
        data() {
            return {
                title: '',
                settingData: [],
                total: 0,
                tableLoading: false,
                queryParams: {
                    pageNum: 1,
                    pageSize: 10
                }
            };
        },
        created() {
            this.getList();
        },
        methods: {
            // 添加
            handleAdd() {
                this.title = '新增';
                this.$refs.editRef.open();
            },

         
            /** 查询列表 */
            getList() {
                this.loading = true;
                this.getDicts('game_category').then(res => {
                    this.loading = false
                    this.gameList = res.data
                }).catch(() => {
                    this.loading = false
                })
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.open = true;
                this.title = "编辑游戏";
                this.form = {...row}
            },

            cancel() {
                this.open = false;
                this.reset();
            },
            
            //新增 表单重置
            reset() {
                this.resetForm("form");
            },


            /** 新增 确认提交 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.dictCode != null) {
                            updateData(this.form).then(response => {
                                this.$modal.msgSuccess("编辑成功");
                                this.open = false;
                                this.getList();
                            });
                        } else {
                            addData(this.form).then(response => {
                                this.$modal.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            });
                        }
                    }
                });
            },
    
      
        

            /** 删除操作 */
            handleDelete(row) {
                console.log(row);
                this.resetQuery();
                delData(row.dictCode).then(response => {
                    this.$modal.msgSuccess("删除成功");
                    this.getList();
                })
            },

            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.$refs.queryForm.resetFields();
                this.handleQuery();
            },

        }
    };
</script>
